﻿<template>
  <div class = 'mySidebar' ref = 'silderBarHeight'>
    <!-- 上部显示logo -->
    <div class = 'innderLogo' v-show = '!isCollapse'>
      <img src = "static/style/common/images/innerLogo.png" alt="">
      <div>RDTP运维服务</div>
    </div>
    <div class = 'innerLogo_collapse' v-show = 'isCollapse'>
      <img src="static/style/common/images/innerLogo.png" alt="">
    </div>
    <!-- 下部展示菜单 -->
    <V-Side-Menu></V-Side-Menu>
  </div>
</template>

<script>
import VSideMenu from '@/components/common/TheSideMenu.vue'
export default {
  components: { VSideMenu },
  computed: {
    isCollapse: function () {
      return this.$store.state.isCollapse
    }
  },
  methods: {
    // 设置左边菜单栏的高度(最小高度为浏览器的窗口的可视高度)
    getWindowHeight () {
      if (this.$refs.silderBarHeight) {
        this.$refs.silderBarHeight.style.minHeight = window.innerHeight + 'px'
      }
    }
  },
  mounted () {
    this.getWindowHeight()
    window.onresize = () => {
      this.getWindowHeight()
    }
  }
}
</script>
